<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
        在页面的对应位置展现图片的内容
        src属性
            指定图片所在的位置,必选属性
            若不指定,则无法显示图片
        alt属性
            当找不到图片的时候,会加载alt属性对应的属性值的内容,必选属性
            将alt属性值展现在页面中
            若alt属性没有值,则什么都不显示
        title属性
            图片的标题,可选属性
            当鼠标悬停在图片上显示的内容
        width属性
            指定图片的宽度,可选属性
            当指定了图片的宽度之后,但是未指定其高度,则其高度会等比例变化
            图片的大小发生了变化之后,其清晰度也会随之改变
        height属性
            指定图片的高度,可选属性
            指定图片的宽度,可选属性
            当指定了图片的高度之后,但是未指定其宽度,则其宽度会等比例变化
            图片的大小发生了变化之后,其清晰度也会随之改变

    -->

    <!--
        当图片和html文件在同一个文件夹的时候，可以直接填写图片名称
    -->
    <img src="fei.png" alt="图片加载失败" title="我是刘亦菲" width="100px">
    <img src="long.png" alt="图片加载失败" title="我是恐龙">
    <img src="mi.png" alt="图片加载失败" title="我是杨幂">
    <img src="b.gif" alt="图片加载失败" title="我是蔡松涛">
    <div style="width:200px;height:200px;background:yellow;">
        <div style="width:100px;height:200px;background:pink;">
            <img src="rabbit.png" alt="" width="50%">
        </div>
    </div>
</body>
</html>